{% extends 'base.html' %}
{% load static %}

{% block title %}资产操作日志 - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
  .stats-card { background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%); color: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
  .log-table { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-history"></i> 资产操作日志</h2>
        <div class="d-flex gap-2">
          {% if perms.assets.delete_assetlog %}
          <form id="batchDeleteForm" method="post" action="{% url 'assets:asset_log_batch_delete' %}" class="d-inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-danger" onclick="return submitBatchDelete();" title="批量删除所选日志"><i class="fas fa-trash"></i> 批量删除</button>
          </form>
          {% endif %}
          <a class="btn btn-outline-secondary" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}"><i class="fas fa-sync-alt"></i> 刷新</a>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <div class="small">总记录数</div>
                <div class="h4 mb-0">{{ stats.total }}</div>
              </div>
              <i class="fas fa-database fa-2x opacity-75"></i>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="stats-card" style="background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%)">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <div class="small">今日日志</div>
                <div class="h4 mb-0">{{ stats.today_count }}</div>
              </div>
              <i class="far fa-calendar-check fa-2x opacity-75"></i>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="stats-card" style="background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%)">
            <div>
              <div class="small mb-2">操作分布（Top5）</div>
              <div class="d-flex flex-wrap gap-2">
                {% for row in stats.action_stats %}
                  <span class="badge bg-light text-dark">{{ row.action }}: {{ row.count }}</span>
                {% empty %}
                  <span class="text-muted">无</span>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 筛选 -->
      <div class="card mb-3">
        <div class="card-body">
          <form method="get" class="row g-3 align-items-end">
            <div class="col-md-3">
              <label class="form-label">资产</label>
              <input type="text" name="asset" class="form-control" placeholder="资产ID" value="{{ asset_filter }}" />
            </div>
            <div class="col-md-3">
              <label class="form-label">操作类型</label>
              <select name="action" class="form-select">
                <option value="">全部</option>
                {% for value, label in action_choices %}
                  <option value="{{ value }}" {% if action_filter == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label">操作人ID</label>
              <input type="text" name="operator" class="form-control" value="{{ operator_filter }}" />
            </div>
            <div class="col-md-2">
              <label class="form-label">开始日期</label>
              <input type="date" name="date_from" class="form-control" value="{{ date_from }}" />
            </div>
            <div class="col-md-2">
              <label class="form-label">结束日期</label>
              <input type="date" name="date_to" class="form-control" value="{{ date_to }}" />
            </div>
            <div class="col-md-8">
              <label class="form-label">搜索</label>
              <input type="text" name="search" class="form-control" placeholder="按描述/资产名称/资产编码搜索" value="{{ search_query }}" />
            </div>
            <div class="col-md-4">
              <button type="submit" class="btn btn-primary w-100"><i class="fas fa-search"></i> 搜索</button>
            </div>
          </form>
        </div>
      </div>

      <!-- 列表 -->
      <div class="log-table">
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead class="table-dark">
              <tr>
                {% if perms.assets.delete_assetlog %}
                <th style="width:36px;"><input type="checkbox" id="selectAll" onclick="toggleSelectAll(this)"></th>
                {% endif %}
                <th>时间</th>
                <th>资产</th>
                <th>操作</th>
                <th>操作人</th>
                <th>描述</th>
                <th style="width:180px;">操作</th>
              </tr>
            </thead>
            <tbody>
              {% for log in page_obj %}
              <tr>
                {% if perms.assets.delete_assetlog %}
                <td><input type="checkbox" class="row-check" value="{{ log.id }}"></td>
                {% endif %}
                <td><small>{{ log.created_at|date:"Y-m-d H:i:s" }}</small></td>
                <td>
                  {% if log.asset %}
                    <a href="{% url 'assets:asset_detail' log.asset_id %}">
                      {{ log.asset.name }}<br>
                      <small class="text-muted">{{ log.asset.asset_number }}</small>
                    </a>
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>
                <td><span class="badge bg-secondary">{{ log.get_action_display }}</span></td>
                <td>{% if log.operator %}<i class="fas fa-user"></i> {{ log.operator.username }}{% else %}<span class="text-muted">系统</span>{% endif %}</td>
                <td>
                  <div class="text-truncate" style="max-width: 360px;" title="{{ log.description }}">{{ log.description }}</div>
                </td>
                <td>
                  <div class="d-flex gap-2">
                    <a class="btn btn-sm btn-outline-primary" href="{% url 'assets:asset_log_detail' log.id %}"><i class="fas fa-eye"></i> 查看</a>
                    {% if perms.assets.delete_assetlog %}
                    <form method="post" action="{% url 'assets:asset_log_delete' log.id %}" onsubmit="return confirm('确定删除该日志记录吗？此操作不可恢复。');">
                      {% csrf_token %}
                      <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i> 删除</button>
                    </form>
                    {% endif %}
                  </div>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="{% if perms.assets.delete_assetlog %}7{% else %}6{% endif %}" class="text-center text-muted py-4"><i class="fas fa-inbox fa-3x mb-2"></i><div>暂无日志记录</div></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% if page_obj.has_other_pages %}
        <div class="d-flex justify-content-between align-items-center p-3 border-top">
          <div class="text-muted">显示第 {{ page_obj.start_index }} - {{ page_obj.end_index }} 条，共 {{ page_obj.paginator.count }} 条</div>
          <nav>
            <ul class="pagination mb-0">
              {% if page_obj.has_previous %}
              <li class="page-item"><a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">上一页</a></li>
              {% endif %}
              {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                  <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                  <li class="page-item"><a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a></li>
                {% endif %}
              {% endfor %}
              {% if page_obj.has_next %}
              <li class="page-item"><a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">下一页</a></li>
              {% endif %}
            </ul>
          </nav>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  function toggleSelectAll(checkbox){
    const rows = document.querySelectorAll('.row-check');
    rows.forEach(cb => cb.checked = checkbox.checked);
  }

  function submitBatchDelete(){
    const checks = Array.from(document.querySelectorAll('.row-check:checked'));
    if(checks.length === 0){
      alert('请先选择要删除的日志');
      return false;
    }
    if(!confirm('确定删除所选日志记录吗？此操作不可恢复。')){
      return false;
    }
    const form = document.getElementById('batchDeleteForm');
    // 清理旧的隐藏输入
    Array.from(form.querySelectorAll('input[name="ids"]')).forEach(n => n.remove());
    // 添加新的隐藏输入
    checks.forEach(cb => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'ids';
      input.value = cb.value;
      form.appendChild(input);
    });
    return true; // allow form submit
  }
</script>
{% endblock %}
